<template>
  <div id="app" style="margin: 0 100px">
    <div style="width: 1200px;height: 80px;text-align: center">
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-button style="margin-right: -10px;margin-top: 10px;border: none" icon="el-icon-user"></el-button>
        <el-button style="margin-right: -20px;margin-top: 10px;border: none" icon="el-icon-search"></el-button>
        <el-button style="margin-right: -30px;margin-top: 10px;border: none" icon="el-icon-shopping-cart-2"></el-button>
        <el-menu-item index="1">商城</el-menu-item>
        <el-menu-item index="2">航拍无人机</el-menu-item>
        <el-menu-item index="3">手持拍摄设备</el-menu-item>
        <el-menu-item index="4">商用产品及方案</el-menu-item>
        <el-menu-item index="5">增值服务</el-menu-item>
        <el-menu-item index="6">DJI创意周边</el-menu-item>
      </el-menu>
    </div>

    <div style="width:1536px;float:left ">
      <div span="12">
        <div style="width: 656px ;float:left" >
          <el-carousel :interval="5000" arrow="always" height="656px">
            <el-carousel-item v-for="item in bannerArr" :key="item">
              <img :src="item" style="width: 100%;height: 100%" alt="">
            </el-carousel-item>
          </el-carousel>
          <div style="margin-top: 20px">
            <el-button type="primary">图片</el-button>
            <el-button type="primary">产品介绍</el-button>
          </div>

        </div>
      </div>

      <div span="12">
        <div style="width: 656px;float:left;text-align: left;padding-left: 50px">
          <h1>DJI Mini 3 Pro</h1>
          <h2>¥4788</h2>
          <p>低至 ¥219.45/月 x 24 期，支持花呗分期、京东白条、掌上生活分期付款</p>
          <ul>
            <li><249 克</li>
            <li>前后下视三向双目避障系统</li>
            <li>最高 4K/60fps 视频和 4K/30fps HDR 视频</li>
            <li>最长 34 分钟飞行时间</li>
            <li>无损竖拍</li>
            <li>焦点跟随（智能跟随、兴趣点环绕、聚焦）</li>
            <li>大师镜头</li>
            <li>延时摄影</li>
          </ul>

          <div style="background-color: white;width: 500px;height: 100px;border-radius:10px;border:1px solid #d3dce6">
            <el-button :plain="true" @click="openHTML" style="margin: 10px 0 0 10px;background-color: white">温馨提示</el-button>
            <p style="margin-left: 10px">新品首发，限量售卖，每人限购 3 台，超量订单将会被取消。</p>
          </div>

          <h3>选你所需</h3>

          <div style="border:1px solid #1890ff;border-radius:10px;width: 500px;height:176px">
            <h3 style="margin-left: 23px">DJI Mini 3 Pro</h3>
            <p style="margin-left: 23px">¥4788 或低至 ¥219.45/月 × 24 期</p>
            <el-divider></el-divider>
            <p style="margin:0 23px">包括DJI RC-N1遥控器,提供飞行必备配件,让你轻装上阵,轻享创作旅程。</p>

          </div>
          <el-button style="margin-top: 30px" @click="buy()">
            立即购买
          </el-button>
        </div>
      </div>

    </div>

    <el-divider STYLE="float: left"></el-divider>
    <h1>深入了解</h1>

    <div style="width: 1536px;float:left">
      <div :gutter="20">
        <div span="12" >
          <div style="width: 490px;height: 480px;margin: 0px 10px;float: left">
            <div>
              <h1 style="position: absolute;margin-left: 23px">轻巧机身，轻盈起飞</h1>
              <h3  style="position: absolute;margin-left:23px;margin-top:80px;font-size:18px;color: #333333">DJI Mini 3 Pro 机身重量低于 249 克[1]，在大部分国家/<br>
                地区无需注册或培训即可起飞；采用可折叠设计，<br>
                收纳便捷。带上它，说走就走，想拍就拍。</h3>


              <img src= "https://stormsend1.djicdn.com/tpc/uploads/core_selling_point/image/2d49b3e449d25a73c5e4908ebcf3a0c1@origin.jpg"
                   style="width: 100%;height: 100%" alt="">
            </div>
          </div>
        </div>

        <div span="12">
          <div style="width: 693px;height: 480px;margin: 0px 10px;float: left">
            <div>
              <h1 style="position: absolute;margin-left: 23px;color: white">三向避障,安全第一</h1>
              <h3  style="position: absolute;margin-left:23px;margin-top:80px;font-size:18px;color: white">配备前视、后视、下视双目视觉感应系统、ToF 和 APAS 4.0（飞行辅助系统）<br>
                [2]，即使身处复杂环境，DJI Mini 3 Pro 也能灵活避障，安全守护不间断。</h3>
              <img src="https://stormsend1.djicdn.com/tpc/uploads/core_selling_point/image/28ffe0176719d90d9f37d08057764056@origin.jpg"
                   style="width: 100%;height: 100%" alt="">

            </div>
          </div>
        </div>

      </div>
    </div>

    <div style="width: 1536px;float:left;margin: 10px">
      <div :gutter="20">
        <div span="12" >
          <div style="width: 693px;height: 480px;margin: 0px 10px;float: left">
            <div>
              <h1 style="position: absolute;margin-left: 23px;color: white">影像系统，真 Pro</h1>
              <h3  style="position: absolute;margin-left:23px;margin-top:80px;font-size:18px;color: white">最高可录制 4K/60fps 视频，1/1.3" 影像传感器拥有双原生 ISO，支持直出 HDR 影<br>
                像[3]，更高的动态范围可保留明暗部位细节，带来细腻画质，画面更具层次感。</h3>
              <img src= "https://stormsend1.djicdn.com/tpc/uploads/core_selling_point/image/b0ce2533821abc9edbe2c1533efd2f85@origin.jpg"
                   style="width: 100%;height: 100%" alt="">
            </div>
          </div>
        </div>

        <div span="12">
          <div style="width: 490px;height: 480px;margin: 0px 10px;float: left">
            <div>

              <img src="https://stormsend1.djicdn.com/tpc/uploads/core_selling_point/image/be53a48634ba711603d92ceafc82b672@origin.jpg"
                   style="width: 100%;height: 100%" alt="">

            </div>
          </div>
        </div>

      </div>
    </div>

    <div style="width: 1200px;margin: 10px">
      <div>
        <img src="https://stormsend1.djicdn.com/tpc/uploads/core_selling_point/image/b33cf3c644e5cb04e172af74bfb19f75@origin.jpg"
             style="width: 100%;height: 100%;" alt="">
      </div>

    </div>

    <el-divider></el-divider>
    <h1>包装清单</h1>
    <div style="width: 1536px;float:left">
      <div :gutter="20">
        <div span="12" >
          <div style="width: 187px;height: 187px;margin: 0px 10px;float: left;background-color: aliceblue">
            <div>
              <img src= "https://stormsend1.djicdn.com/tpc/uploads/in_the_box/cover/735f409c7c5536d99380ff7defac751c@retina_small.png"
                   style="width: 100%;height: 100%" alt="">
            </div>
            <b>DJI Mini 3 Pro <br>
              × 1</b>
          </div>
        </div>

        <div span="12">
          <div style="width: 187px;height: 187px;margin: 0px 10px;float: left;background-color: aliceblue">
            <div>

              <img src="https://stormsend1.djicdn.com/tpc/uploads/in_the_box/cover/dab294bb09bd655686174e6ece22a9ca@retina_small.png"
                   style="width: 100%;height: 100%" alt="">

            </div>
            <b>DJI RC-N1 遥控器<br>
              × 1</b>
          </div>
        </div>

        <div span="12" >
          <div style="width: 187px;height: 187px;margin: 0px 10px;float: left;background-color: aliceblue">
            <div>
              <img src= "https://stormsend1.djicdn.com/tpc/uploads/in_the_box/cover/2e4dc36d19db9571204917ca33beb5f2@retina_small.png"
                   style="width: 100%;height: 100%" alt="">
            </div>
            <b>DJI RC-N1 遥控器转接线（USB Type-C 接头）<br>
              × 1</b>
          </div>
        </div>

        <div span="12" >
          <div style="width: 187px;height: 187px;margin: 0px 10px;float: left;background-color: aliceblue">
            <div>
              <img src= "https://stormsend1.djicdn.com/tpc/uploads/in_the_box/cover/7aabf1c08ac6789025190524c279678e@retina_small.png"
                   style="width: 100%;height: 100%" alt="">
            </div>
            <b>DJI RC-N1 遥控器转接线（Lightning 接头）<br>
              × 1</b>
          </div>
        </div>


        <div span="12" >
          <div style="width: 187px;height:187px;margin: 0px 10px;float: left;background-color:aliceblue">
            <div>
              <img src= "https://stormsend1.djicdn.com/tpc/uploads/in_the_box/cover/39e88e9675fd6980dfec25b5fd9a7630@retina_small.png"
                   style="width: 100%;height: 100%" alt="">
            </div>
            <b>DJI RC-N1 遥控器转接线（标准 Micro-USB 接头）<br>× 1</b>

          </div>
        </div>


        <div span="12" >
          <div style="width: 187px;height: 187px;margin: 0px 10px;float: left;background-color: aliceblue">
            <div>
              <img src= "https://stormsend1.djicdn.com/tpc/uploads/in_the_box/cover/9afea66d277a66af418c5dd938b73e6c@retina_small.png"
                   style="width: 100%;height: 100%" alt="">
            </div>
            <b>DJI Mini 3 Pro 智能飞行电池<br>× 1</b>

          </div>
        </div>



      </div>
    </div>

    <div style="width: 1536px;float:left;margin-top: 100px">
      <div :gutter="20">
        <div span="12" >
          <div style="width: 187px;height: 187px;margin: 0px 10px;float: left;background-color: aliceblue">
            <div>
              <img src= "https://stormsend1.djicdn.com/tpc/uploads/in_the_box/cover/fa1898b4a3aa9dccd73d98ecdfa05beb@retina_small.png"
                   style="width: 100%;height: 100%" alt="">
            </div>
            <b>备用螺旋桨（对）<br>× 1</b>

          </div>
        </div>

        <div span="12">
          <div style="width: 187px;height: 187px;margin: 0px 10px;float: left;background-color: aliceblue">
            <div>

              <img src="https://stormsend1.djicdn.com/tpc/uploads/in_the_box/cover/36db3107c0d123e33e650e8eee5043a5@retina_small.png"
                   style="width: 100%;height: 100%" alt="">

            </div>
            <b>云台保护锁扣** × 1<br></b>

          </div>
        </div>

        <div span="12" >
          <div style="width: 187px;height: 187px;margin: 0px 10px;float: left;background-color: aliceblue">
            <div>
              <img src= "https://stormsend1.djicdn.com/tpc/uploads/in_the_box/cover/f6bb7c28dbbea9b812c690f6c79026cc@retina_small.png"
                   style="width: 100%;height: 100%" alt="">
            </div>
            <b>Type-C to Type-C PD 快充线<br>× 1</b>

          </div>
        </div>

        <div span="12" >
          <div style="width: 187px;height: 187px;margin: 0px 10px;float: left;background-color: aliceblue">
            <div>
              <img src= "https://stormsend1.djicdn.com/tpc/uploads/in_the_box/cover/99d924485f532f03366f0ade1170709d@retina_small.png"
                   style="width: 100%;height: 100%" alt="">
            </div>
            <b>螺丝刀 <br>× 1</b>

          </div>
        </div>


        <div span="12" >
          <div style="width: 187px;height: 187px;margin: 0px 10px;float: left;background-color:aliceblue">
            <div>
              <img src= "https://stormsend1.djicdn.com/tpc/uploads/in_the_box/cover/05c93cb77590070f7619c3f055eaadf6@retina_small.png"
                   style="width: 100%;height: 100%" alt="">
            </div>
            <b>备用螺丝<br>× 1</b>

          </div>
        </div>


      </div>
    </div>



    <h1 style="line-height: 200px">看看哪款更适合你？</h1>
    <div style="width: 1536px;float:left;margin-top: 30px">
      <div :gutter="20">
        <div span="12" >
          <div style="width: 288px;height: 288px;margin: 0px 10px;float: left;background-color: aliceblue">
            <div>
              <img src= "https://stormsend1.djicdn.com/tpc/uploads/sku/compare_cover/5de6a46751c989233c0be252199673e7@retina_small.png"
                   style="width: 100%;height: 100%" alt="">
            </div>
            <b >DJI Mini 3 Pro</b>
            <p style="text-align: left">轻巧型航拍能手<br>
              低于 249 克<br>
              1/1.3 英寸影像传感器<br>
              f/1.7 光圈<br>
              最高 4K/60fps 视频和 4K/30fps HDR 视频<br>
              4800 万像素 JPEG/DNG（RAW）照片<br>
              最长 34 分钟飞行时间（无风环境）<br>
              最远 12 公里 1080p/30fps 图传*<br>
              前、后、下视三向双目视觉避障系统<br>
              APAS 4.0（高级飞行辅助系统）<br>
              焦点跟随：智能跟随 4.0<br>
              焦点跟随：兴趣点环绕 3.0<br>
              焦点跟随：聚焦 2.0<br>
              大师镜头<br>
              延时摄影<br>
              无损竖拍</p>

          </div>
        </div>

        <div span="12">
          <div style="width: 288px;height: 288px;margin: 0px 10px;float: left;background-color: aliceblue">
            <div>

              <img src="https://stormsend1.djicdn.com/tpc/uploads/sku/cover/d54dd75147fee25c86b9b3639e3c316d@retina_small.png"
                   style="width: 100%;height: 100%" alt="">

            </div>
            <b>DJI Mini 2</b>
            <p style="text-align: left">
              小巧易用，新手必备<br>
              低于 249 克<br>
              1/2.3 英寸影像传感器<br>
              f/2.8 光圈<br>
              最高 4K/30fps 视频<br>
              1200 万像素 JPEG/DNG（RAW）照片<br>
              最长 31 分钟飞行时间（无风环境）<br>
              最远 10 公里 720p/30fps 图传*<br>
              下视单目视觉避障系统
            </p>

          </div>
        </div>

        <div span="12" >
          <div style="width: 288px;height: 288px;margin: 0px 10px;float: left;background-color: aliceblue">
            <div>
              <img src= "https://stormsend1.djicdn.com/tpc/uploads/spu/cover/7727599c23f26f2fa55ab60494cd3569@retina_small.png"
                   style="width: 100%;height: 100%" alt="">
            </div>
            <b>御 Mavic Air 2</b>
            <p style="text-align: left">
              均衡佳作，性价比首选<br>
              570 克<br>
              1/2 英寸影像传感器<br>
              f/2.8 光圈<br>
              最高 4K/60fps 视频<br>
              4800 万像素 JPEG/DNG（RAW）照片<br>
              最长 34 分钟飞行时间（无风环境）<br>
              最远 10 公里 1080p/30fps 图传*<br>
              前、后、下视三向双目视觉避障系统<br>
              APAS 3.0（高级飞行辅助系统）<br>
              焦点跟随：智能跟随 3.0<br>
              焦点跟随：兴趣点环绕 3.0<br>
              焦点跟随：聚焦 2.0<br>
              -<br>
              延时摄影
            </p>

          </div>
        </div>

        <div span="12" >
          <div style="width: 288px;height: 288px;margin: 0px 10px;float: left;background-color: aliceblue">
            <div>
              <img src= "https://stormsend1.djicdn.com/tpc/uploads/spu/cover/767191572ee74ba97f009ee053b754ee@retina_small.png"
                   style="width: 100%;height: 100%" alt="">
            </div>
            <b>DJI Air 2S</b>
            <p style="text-align: left">
              航拍轻旗舰，进阶之选<br>
              595 克<br>
              1 英寸影像传感器<br>
              f/2.8 光圈<br>
              最高 5.4K/30fps 视频<br>
              2000 万像素 JPEG/DNG（RAW）照片<br>
              最长 31 分钟飞行时间（无风环境）<br>
              最远 12 公里 1080p/30fps 图传*<br>
              前、后、上、下视四向双目视觉避障系统<br>
              APAS 4.0（高级飞行辅助系统）<br>
              焦点跟随：智能跟随 4.0<br>
              焦点跟随：兴趣点环绕 3.0<br>
              焦点跟随：聚焦 2.0<br>
              大师镜头<br>
              延时摄影
            </p>

          </div>
        </div>

      </div>
    </div>


    <div style="background-color: #99a9bf;height: 200px ;margin-top: 800px;margin-left: -100px" >
      <div>
        <img style="margin-left: 700px;margin-top: 20px" src="https://www1.djicdn.com/dps/cee842f19dde1561650754528f49d6b5.svg" alt="">
        <p style="color: #333333;text-decoration:none;text-align: center">关于我们  联系我们  招聘精英 官方旗舰店</p>
        <el-divider></el-divider>
        <p style="color:#333333 ;text-align: center">Copyright © 2022 DJI 大疆创新  版权所有隐私权政策  使用条款 粤ICP备12022215号-11 营业执照 网站地图</p>
      </div>
    </div>







  </div>


</template>

<style>
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}


</style>

<script>
export default {
  name: 'ProductView',
  data: function () {
    return {
      bannerArr: [
        "//stormsend1.djicdn.com/tpc/uploads/carousel/image/95c923686020b536a85470ecc48740ed@ultra.jpg",
        "//stormsend1.djicdn.com/tpc/uploads/carousel/image/9421412f8e83278b37b538744a0913b0@ultra.jpg",
        "//stormsend1.djicdn.com/tpc/uploads/carousel/image/67600aa9aca2dcd388609d97e62b1bfb@ultra.jpg",
        "//stormsend1.djicdn.com/tpc/uploads/carousel/image/0c9ef45f0f73504682fe3ac1b7c8a932@ultra.jpg",
        "//stormsend1.djicdn.com/tpc/uploads/carousel/image/7a163820d354229e4bc381587f4a47dc@ultra.jpg",
        "//stormsend1.djicdn.com/tpc/uploads/carousel/image/2ecab852e3bf804cdc59b57848a56f42@ultra.jpg",
        "//stormsend1.djicdn.com/tpc/uploads/carousel/image/3fa93a9324c9a1c515b5a747d5624deb@ultra.jpg",
        "//stormsend1.djicdn.com/tpc/uploads/carousel/image/3dcfdfb12067648a1200e6407747b511@ultra.jpg"
      ]
    }
  },
  methods:{
    buy(){
      location.href="http://localhost:8081/settlement"
    }
  }

}

</script>
